<style scoped>
    .box {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: url(../../public/img/login.jpg) no-repeat center;
        background-size: 100% 100%;
    }
</style>
<template>
    <div class="box">
        <div :style="{height:'50vh',width:'50vh',marginLeft:'60vh',marginTop:'40vh'}">
            <Form ref="userInfo" :model="userInfo" :rules="ruleUser" :label-width="80">
                <FormItem label="账号" prop="userId">
                    <Input type="text" v-model="userInfo.userId"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input type="password" v-model="userInfo.password"></Input>
                </FormItem>
                <FormItem></FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit">登陆</Button>
                    <Button @click="handleReset" style="margin-left: 8px">清空</Button>
                    <Button type="info" @click="handleRegister" style="margin-left: 8px">注册</Button>
                </FormItem>
            </Form>
        </div>
        <Modal
                v-model="isModalRegisterUser"
                title="用户注册"
                okText="注册"
                cancelText="关闭"
                :mask-closable="false"
                @on-ok="onRegisterUserInfo"
               >

            <v-register-user ref="registerUser"></v-register-user>

        </Modal>
    </div>
</template>

<script>

    import registerUser from './RegisterUser'

    export default {
        name: "Login",
        data() {
            return {
                userInfo: {
                    userId: '',
                    password: ''
                },
                ruleUser: {
                    userId: [
                        {required: true, message: '请填写用户名！', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请填写密码', trigger: 'blur'}
                    ]
                },
                isModalRegisterUser: false
            }
        },
        methods: {
            handleSubmit() {
                this.$refs['userInfo'].validate((valid) => {
                    if (valid) {
                        this.login();
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset() {
                this.$refs['userInfo'].resetFields();
            },
            login: function () {
                let self = this;
                this.$http({
                    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
                    transformRequest: [data => self.$qs.stringify(data)],
                    method: 'post',
                    url: '/core/login',
                    data: {
                        userId: self.userInfo.userId,
                        password: self.userInfo.password
                    }
                }).then(function (response) {
                    let userInfo = self.common.handleData(response.data, self);
                    self.common.setStorageS("userInfo", userInfo);
                    self.$router.push({path: '/index'});
                }).catch(function (error) {

                    self.$Message.error({
                        content: error.response.data.message,
                        duration: 10
                    });
                });

            },
            handleRegister() {
                let self = this;
                self.isModalRegisterUser = true;
            },
            onRegisterUserInfo(){
                let self=this;
                self.$refs.registerUser.registerUser();
            }
        },
        components: {
            'v-register-user': registerUser,
        }
    }
</script>

